<template>
  <div class="top-right-btn">   
    <el-row>
      <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top">
        <el-button type="info" plain circle size="mini"  icon="el-icon-search" @click="toggleSearch()" />
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="刷新" placement="top">
        <el-button type="success" plain circle size="mini"  icon="el-icon-refresh" @click="refresh()" />
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns">
        <el-popover width="60" trigger="click">    
          <el-checkbox v-for="item in columns" :key="item.key" v-model="item.visible" >{{item.label}}</el-checkbox> 
          <el-button type="warning" plain circle class="menu_margin" slot="reference" size="mini" sc  icon="el-icon-menu"/>
        </el-popover>  
      </el-tooltip>       
    </el-row>   
  </div>
</template>
<script>
export default {
  name: "RightToolbar",
  props: {
    showSearch: {
      type: Boolean,
      default: true,
    },
    columns: {
      type: Array,
    },
  },

  methods: {
    // 搜索
    toggleSearch() {
     this.$emit("update:showSearch",!this.showSearch)
    },
    // 刷新
    refresh() {
      this.$emit("queryTable");
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-transfer__button {
  border-radius: 50%;
  padding: 12px;
  display: block;
  margin-left: 0px;
}
::v-deep .el-transfer__button:first-child {
  margin-bottom: 10px;
}
.menu_margin{
   margin-left: 10px;
}
.el-checkbox{
  margin-top: 8px;
}


</style>
